import React, {Component} from 'react';
import {NavBar, WingBlank, List, InputItem, WhiteSpace, Radio, Button} from 'antd-mobile'
import Logo from '../../components/logo/logo'
import './register.less'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faUser, faLock, faMars} from '@fortawesome/fontawesome-free-solid'

import {connect} from 'react-redux'
import {Redirect} from 'react-router-dom'
import {regiter} from '../../redux/actions'

const ListItem = List.Item;

class Register extends Component {
    state = {
        username: "",
        password: '',
        password2: '',
        type: '',
    }

    handleChaneg(name, val) {
        this.setState({
            [name]: val
        });
    }

    login = () => {
        this.props.history.replace('/login')
    }
    resgister = () => {
       this.props.regiter(this.state)
    }

    render() {
        var {type} = this.state
        let {redirectTo, msg}  = this.props
        if(redirectTo) {
            return <Redirect to={redirectTo}/>
        }
        return (
            <div>
                <NavBar>navBar</NavBar>
                <Logo></Logo>
                <WingBlank>
                    {msg ? <p className='error-msg'>{msg}</p> : null}
                    <List className='register_list'>
                        <InputItem placeholder="用户名" onChange={(val) => {
                            this.handleChaneg('username', val)
                        }}>
                            <FontAwesomeIcon tabIndex='20' color='#999' icon={faUser}/>
                        </InputItem>
                        <WhiteSpace/>
                        <InputItem type='password' placeholder="密码" onChange={(val) => {
                            this.handleChaneg('password', val)
                        }}>
                            <FontAwesomeIcon color='#999' icon={faLock}/>
                        </InputItem>
                        <WhiteSpace/>
                        <InputItem type='password' placeholder="确认密码" onChange={(val) => {
                            this.handleChaneg('password2', val)
                        }}>
                            <FontAwesomeIcon color='#999' icon={faLock}/>
                        </InputItem>
                        <WhiteSpace/>
                        <ListItem>
                            <span className='check_sex'><FontAwesomeIcon color='#999' icon={faMars}/></span>
                            <Radio checked={type === 'user'} chen onClick={() => {
                                this.handleChaneg('type', 'user')
                            }}>用户</Radio>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <Radio checked={type === 'admin'} onClick={() => {
                                this.handleChaneg('type', 'admin')
                            }}>管理员</Radio>
                        </ListItem>
                        <WhiteSpace/>
                        <Button type='primary' onClick={this.resgister}>注册</Button>
                        <WhiteSpace/>
                        <Button onClick={this.login}>登录</Button>
                    </List>

                </WingBlank>
            </div>
        );
    }
}

export default connect(
    state => state.user,
    {regiter}
)(Register);